<template>
  <main class="w-full h-full dark:bg-black p-4">
    <use-header></use-header>
    <use-table
      :searchSelectOption="searchSelectOption"
      :columns="columns"
      :loading="loading"
      :allData="allscore"
      :total="total"
    >
      <template #title> 成绩列表 </template>
    </use-table>
  </main>
</template>

<script setup lang="ts">
  import UseHeader from './components/UseHeader.vue';
  import { StudentScore } from '@/utils/interface';
  import { getAllStudentScore } from '@/api/user';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  const router = useRouter();
  const { getToken } = storeToRefs(useUserInfoStoreWithOut());
  if (!getToken.value) router.replace('/login');
  // 表头
  const columns = reactive([
    {
      title: '学生姓名',
      dataIndex: 'student_name',
      align: 'center',
    },
    {
      title: '班级',
      dataIndex: 'class_name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '考试名称',
      dataIndex: 'test_name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '单选题成绩',
      dataIndex: 'single_score',
      align: 'center',
      sorter: (a, b) => a.single_score - b.single_score,
      showSorterTooltip: false,
      width: 140,
    },
    {
      title: '多选题成绩',
      dataIndex: 'selection_score',
      align: 'center',
      sorter: (a, b) => a.selection_score - b.selection_score,
      width: 140,
    },
    {
      title: '判断题成绩',
      dataIndex: 'judge_score',
      align: 'center',
      sorter: (a, b) => a.selection_score - b.selection_score,
      width: 140,
    },
    {
      title: '总成绩',
      dataIndex: 'sum_score',
      align: 'center',
      sorter: (a, b) => a.sum_score - b.sum_score,
      width: 140,
    },
  ]);
  let total = ref(0);

  // 搜索框下拉列表
  const searchSelectOption: { value: string; label: string }[] = [
    {
      value: 'class_name',
      label: '班级',
    },
    {
      value: 'student_name',
      label: '姓名',
    },
    {
      value: 'test_name',
      label: '考试名称',
    },
  ];
  // 是否加载
  let loading = ref(true);

  // 全部数据
  const allscore = ref<StudentScore[]>([]);
  // 获取数据
  const getTableData = () => {
    getAllStudentScore().then((res) => {
      allscore.value = res.data;
      loading.value = false;
      total.value = res.data.length;
    });
  };
  getTableData();
</script>

<style scoped></style>
